- topic = local_assigns.fetch(:topic)
- title = topic.title || topic.name

%li.gl-items-center{ class: '!gl-flex' }
  = render Pajamas::AvatarComponent.new(topic, size: 32, alt: '')

  .gl-min-w-0.gl-grow.gl-ml-3
    .gl-font-bold
      = link_to title, topic_explore_projects_cleaned_path(topic_name: topic.name)
    - if topic.description
      .gl-text-sm.md.gl-truncate{ class: '*:!gl-text-subtle *:!gl-m-0' }
        = first_line_in_markdown(topic, :description, 200)

  .stats.gl-text-subtle.gl-shrink-0.gl-hidden{ class: "@sm/panel:gl-flex" }
    %span.gl-ml-5.has-tooltip{ title: n_('%d project', '%d projects', topic.total_projects_count) % topic.total_projects_count }
      = sprite_icon('chart', css_class: 'gl-align-text-bottom')
      = number_with_delimiter(topic.total_projects_count)

  .gl-shrink-0.gl-ml-5.gl-flex.gl-gap-3
    = render Pajamas::ButtonComponent.new(category: :tertiary, href: edit_admin_topic_path(topic), icon: 'pencil', button_options: { id: "edit_#{dom_id(topic)}", class: 'has-tooltip', 'title': _('Edit'), 'aria-label': _('Edit') })
    = render Pajamas::ButtonComponent.new(category: :tertiary, href: admin_topic_path(topic), method: :delete, icon: 'remove', button_options: { class: 'has-tooltip', 'title': _('Remove'), 'aria-label': _('Remove'), data: { confirm: _("Are you sure you want to remove %{topic_name}?") % { topic_name: title }, confirm_btn_variant: 'danger' } })
